<template>
  <div class="cont-wrapper no-sidebar" v-if="show">
    <div class="block-container container">
      <div class="title">监考工作人员管理</div>
      <div class="operation">
        <el-button type="primary" class="c-btn" @click="createStaffer('new')">新增</el-button>
        <el-button type="primary" class="c-btn" @click="dialogVisible = true">导入</el-button>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" border class="c-table" style="width: 100%" v-loading="loading">
          <el-table-column label="#" width="70">
            <template slot-scope="scope">
              {{ (listQuery.page - 1) * listQuery.pageSize  + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="teacherName" label="姓名"></el-table-column>
          <el-table-column prop="schoolName" label="所在学校"></el-table-column>
          <el-table-column prop="area" label="考点"></el-table-column>
          <el-table-column prop="roomNum" label="考场编号"></el-table-column>
          <el-table-column prop="roomPlace" label="候考地点"></el-table-column>
          <el-table-column prop="code" label="编号"></el-table-column>
          <el-table-column label="时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.examDate }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <i class="el-icon-edit i-con" @click="createStaffer(scope.row, scope.$index)"></i>
              <i class="el-icon-delete i-con" @click="handleDeleteStaffer(scope.row.id, scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
        <kw-pagination v-if="tableData.length" :listQuery="listQuery" @changeCurrentPage="changeCurrentPage"></kw-pagination>
      </div>
    </div>
    <!-- 删除确认 -->
    <kw-delconfim :delVisible.sync="delDialog" @handleDelete="handleDelete"></kw-delconfim>
    <!-- 导入候考工作人员 -->
    <el-dialog title="导入候考工作人员" :visible.sync="dialogVisible" width="30%" center custom-class="c-dialog"
      @close="onClose">
      <div class="dialog-cont">
        <el-upload
          ref="staffUpload"
          class="upload-staff"
          :action="uploadUrl + '/batchStaff/resultImport/staffInvigilates'"
          accept=".xls, .xlsx"
          :on-success="handleDataSuccess"
          :before-upload="beforeDataUpload"
          :with-credentials="true"
          :limit="1"
          :auto-upload="false">
          <el-button size="small" type="primary">选择文件</el-button>
        </el-upload>
        <a :href='GLOBAL.COMMON+ "/batchStaff/download_template/staffInvigilates"' class="download-temp">导入模板下载</a>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="c-btn" :loading="uploadLoading" type="primary" @click="submitUpload">确 定</el-button>
        <el-button class="c-btn" @click="onClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- 新增页面 -->
  <div class="block-container create-cont" v-else>
    <a class="back" @click="show = true"><i class="el-icon-back"></i><span>返回</span></a>
    <P class="middle-font">{{createTitle}}监考工作人员</P>
    <el-form ref="form" label-position="left" :model="form" label-width="100px" style="width:60%">
      <el-form-item label="姓名：">
        <el-input v-model="form.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="所在学校：">
        <el-select class="mx-select" filterable v-model="form.schoolName" placeholder="请选择">
          <el-option-group
            v-for="area in schoolList"
            :key="area.areaName"
            :label="area.areaName">
            <el-option
              v-for="item in area.child"
              :key="item.id"
              :label="item.areaName"
              :value="item.areaName">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="考点：">
        <!-- <el-input v-model="form.roomPlace"></el-input> -->
        <!-- <el-select class="mx-select" filterable v-model="form.roomPlace" placeholder="请选择" @change="getRoomNumByAreaName">
          <el-option-group
            v-for="area in schoolList"
            :key="area.areaName"
            :label="area.areaName">
            <el-option
              v-for="item in area.child"
              :key="item.id"
              :label="item.areaName"
              :value="item.areaName">
            </el-option>
          </el-option-group>
        </el-select> -->
        <el-select class="mx-select" v-model="form.area" placeholder="请选择" @change="getRoomNumByAreaName">
          <el-option
            v-for="item in pointList"
            :key="item.id"
            :label="item.areaName"
            :value="item.areaName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考场：">
        <!-- <el-input v-model="form.roomNum"></el-input> -->
        <el-select class="mx-select" v-model="form.roomNum" placeholder="请选择" @visible-change="roomNumVisibleChange" @change="checkRoom">
          <el-option
            v-for="(item, idx) in roomPlaceList"
            :key="idx"
            :label="item.roomName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="监考地点：">
        <el-input v-model="form.area "></el-input>
      </el-form-item> -->
     <el-form-item label="教师编号：">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="时间：">
        <el-select class="mx-select" v-model="form.examDate" placeholder="请选择">
          <el-option
            v-for="(item, idx) in timeList"
            :key="idx"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" class="c-btn" @click="addStaffer">确定</el-button>
      <el-button class="c-btn" @click="show = true">取消</el-button>
    </div>
  </div>
</template>

<script>
import kwDelconfim from '@/components/DelConfim.vue'
import kwPagination from '@/components/Pagination.vue'
import schoolMixins from '@/common/mixins/schools.js'
export default {
  name: 'stafferWait',
  components: {
    kwDelconfim,
    kwPagination
  },
  mixins: [schoolMixins],
  data () {
    return {
      uploadLoading: false,
      listQuery: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      loading: false,
      tableData: [],
      rowIdx: null,
      stafferId: null,
      delDialog: false,
      dialogVisible: false,
      show: true,
      form: {},
      timeList: [],
      createTitle: '新增',
      fileList: [],
      uploadUrl: process.env.VUE_APP_PC_API,
      roomPlaceList: [],
      pointList: []
    }
  },
  created () {
    this.getStafferList()
    this.getBatchTime()
    this.getPoints()
  },
  methods: {
    // 获取考点列表
    getPoints () {
      let that = this
      that.$http.getPoint().then(res => {
        if (res.code === 20000) {
          that.pointList = res.data
        } else {
          that.$message.error('暂无考点信息')
        }
      })
    },
    // 新增工作人员
    createStaffer (row, idx) {
      if (row === 'new') {
        // 新增
        this.form = {
          teacherName: '',
          schoolName: '',
          roomPlace: '',
          code: '',
          roomNum: '',
          examDate: '',
          phone: ''
        }
        this.createTitle = '新增'
        this.show = false
      } else {
        // 编辑
        this.form = {
          teacherName: row.teacherName,
          schoolName: row.schoolName,
          roomPlace: row.roomPlace,
          code: row.code,
          area: row.area,
          roomNum: row.roomNum,
          examDate: row.examDate,
          phone: row.phone
        }
        this.stafferId = row.id
        this.rowIdx = idx
        this.createTitle = '编辑'
        this.show = false
      }
    },
    // 获取工作人员
    getStafferList () {
      let that = this
      that.loading = true
      let qsData = {
        page: that.listQuery.page,
        pageSize: that.listQuery.pageSize
      }
      that.$http.getStaffInvigilateList(qsData).then(res => {
        if (res.code === 20000) {
          that.tableData = res.data.content
          that.listQuery.total = res.data.totalElements
          that.listQuery.totalPages = res.data.totalPages
        } else {
          that.$message.error(res.msg)
        }
        that.loading = false
      })
    },
    // 获取时间
    getBatchTime () {
      let that = this
      that.$http.getBeginBatchTime().then(res => {
        if (res.code === 20000) {
          that.timeList = res.data
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    // 导入前校验
    beforeDataUpload (file) {
      const isXLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'.indexOf(file.type) >= 0
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isXLSX) {
        this.$message.error('上传文件只能是 excel 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
      }
      if (isXLSX && isLt10M) {
        this.uploadLoading = true
        return true
      } else {
        return false
      }
    },
    // 手动上传
    submitUpload () {
      this.$refs.staffUpload.submit()
    },
    onClose () {
      this.fileList = []
      this.dialogVisible = false
    },
    // 导入成功回调
    handleDataSuccess (res, file) {
      if (res.code === 20000) {
        this.uploadLoading = false
        this.listQuery.page = 1
        this.getStafferList()
        this.$message.success('导入监考工作人员成功')
      } else {
        this.$message.error(res.msg)
      }
      this.onClose()
    },
    // 翻页
    changeCurrentPage (queryData) {
      this.listQuery.page = queryData.page
      this.listQuery.pageSize = queryData.pageSize
      this.getStafferList()
    },
    // 删除指定工作人员
    handleDeleteStaffer (id, idx) {
      this.rowIdx = idx
      this.stafferId = id
      this.delDialog = true
    },
    // 删除回调
    handleDelete () {
      let that = this
      // 删除单个
      that.$http.delStaffInvigilate({ id: that.stafferId }).then(res => {
        if (res.code === 20000) {
          that.tableData.splice(that.rowIdx, 1)
          that.$message.success('删除监考工作人员成功')
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    // 添加候考人员
    addStaffer () {
      let that = this
      if (that.stafferId) {
        that.form.id = that.stafferId
      }
      that.$http.createStaffInvigilate(this.form).then(res => {
        if (res.code === 20000) {
          if (that.stafferId) {
            let _item = that.tableData[that.rowIdx]
            _item.teacherName = res.data.teacherName
            _item.schoolName = res.data.schoolName
            _item.roomPlace = res.data.roomPlace
            _item.area = res.data.area
            _item.id = res.data.id
            _item.roomNum = res.data.roomNum
            _item.examDate = res.data.examDate
            _item.phone = res.data.phone
            that.$set(that.tableData, that.rowIdx, _item)
            that.$message.success('修改监考工作人员成功')
          } else {
            that.$message.success('新增监考工作人员成功')
            that.listQuery.page = 1
            that.getStafferList()
          }
          that.show = true
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    // 根据考点获取考场编号
    getRoomNumByAreaName (val) {
      let that = this
      that.form.roomNum = null
      that.roomPlaceList = []
      that.$http.getRoomNumByAreaName({ areaName: val }).then(res => {
        if (res.code === 20000 && res.data.length) {
          that.roomPlaceList = res.data
        } else {
          that.$message.error('该考点下暂无考场')
        }
      })
    },
    roomNumVisibleChange (val) {
      debugger
      if (val && !this.roomPlaceList.length && !this.form.area) {
        this.$message.error('请先选择考点')
      }
    },
    checkRoom (val) {
      this.roomPlaceList.map(item => {
        if (item.id === val) {
          this.form.roomPlace = item.roomName
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-cont{
  position: relative;
  .download-temp{
    position: absolute;
    right: 0;
    top: 4px;
    color: #4177FF;
  }
}
.nva_menu_container .container {
  margin-left: 0;
  width: 100%;
}
</style>
